als-component
Advanced tools
lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.
als-component is a lightweight JavaScript library for creating reactive, server-rendered, and browser-based components. It allows you to build dynamic components that work both on the server (Node.js) and in the browser, providing seamless reactivity, lifecycle hooks, and event handling.
Install via NPM:
npm install als-component
const Component = require('als-component');
class HelloComponent extends Component {
constructor(props) { super(props) }
render({ name }) {
return `<div>Hello, ${name}!</div>`;
}
}
const instance = new HelloComponent({ name: 'World' });
console.log(instance.call()); // Outputs: <div component="HelloComponent">Hello, World!</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>als-component Example</title>
<script src="/node_modules/als-component/component.js"></script>
<!-- Or minified version -->
<script src="/node_modules/als-component/component.min.js"></script>
</head>
<body>
<div component="App"></div>
<script>
class App extends Component {
constructor(props) { super(props) }
render({ count = 0 }) {
return `
<div>
<button click="${this.action('click', () => this.update({ count: count - 1 }))}">-</button>
<span>${count}</span>
<button click="${this.action('click', () => this.update({ count: count + 1 }))}">+</button>
</div>
`;
}
}
const app = new App({ count: 0 });
app.update();
</script>
</body>
</html>
constructor(props = {}, inner)Initializes a new component.
props (Object): The initial properties of the component.inner (String): The inner content of the component.call()Renders the component and returns the HTML string.
Example:
const html = instance.call();
console.log(html); // <div component="ComponentName">Rendered content</div>
update(props, inner)Updates the component with new properties and re-renders it.
Example:
instance.update({ count: 5 });
action(event, fn)Creates an event action and binds it to the element.
event (String): The event type (e.g., 'click').fn (Function): The event handler function.Example:
const clickId = instance.action('click', () => alert('Button clicked'));
on(event, fn)Registers a lifecycle hook.
event (String): The lifecycle event ('mount' or 'unmount').fn (Function): The callback function.Example:
instance.on('mount', () => console.log('Component mounted'));
instance.on('unmount', () => console.log('Component unmounted'));
runActions()Binds all stored actions to the corresponding elements and triggers mount hooks.
The render method can be asynchronous. If it is an async function, the component handles it automatically.
Example:
class AsyncComponent extends Component {
async render() {
const data = await fetchData();
return `<div>${data}</div>`;
}
}
const asyncInstance = new AsyncComponent();
asyncInstance.update();
async buildAsync(updateElement = true) and buildSync(updateElement = true)You can call for buildAsync (return promise) or buildSync with updateElement flag to update or not to update the element.
set elementOuterYou can manualy set outerHTML for component's element. If element is not exists, it simply will do nothing.
mountCalled when the component is added to the DOM.
unmountCalled when the component is removed from the DOM.
Example:
instance.on('mount', () => console.log('Mounted'));
instance.on('unmount', () => console.log('Unmounted'));
Use action() to bind events to elements within the component.
Example:
class ClickComponent extends Component {
render() {
return `<button click="${this.action('click', () => alert('Button clicked'))}">Click Me</button>`;
}
}
You can nest components within each other. The parent component can include a child component using call().
Example:
class ChildComponent extends Component {
render() {
return `<span>Child Component</span>`;
}
}
class ParentComponent extends Component {
render() {
return `<div>Parent: ${new ChildComponent().call()}</div>`;
}
}
const parentInstance = new ParentComponent();
parentInstance.update();
The als-component library uses WeakMap to store component instances, ensuring that they are garbage collected when removed from the DOM.
Example:
const instance = new Component();
document.body.appendChild(instance.element);
instance.update();
instance.element.remove();
instance.runActions();
The component is removed from WeakMap automatically when it is no longer referenced.
update() sparingly to avoid excessive DOM manipulations.render for components that require data fetching.When using asynchronous methods or complex nested components, ensure you handle potential errors gracefully.
Example:
try {
await instance.update();
} catch (error) {
console.error('Error updating component:', error);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/component.js"></script>
<title>Users</title>
</head>
<body>
<div component="Users"></div>
</body>
<script>
class User extends Component {
constructor(props) { super(props) }
remove() {
const {user,usersComponent} = this.props
// const usersComponent = this.Component.components.Users // Another way to get component
usersComponent.update({users:usersComponent.props.users.filter(({id}) => id !== user.id)})
}
render({user}) {
const {id,email,age,gender,username,firstName} = user
return /*html*/`<div>
${firstName}
<button click="${this.action('click',() => this.remove())}">delete</button>
</div>`
}
}
class Users extends Component {
constructor(props={},inner) {
super(props,inner)
}
async render({users}) {
if(users === undefined) {
fetch('https://dummyjson.com/users')
.then(res => res.json())
.then(data => {
this.update({users:data.users})
});
return /*html*/`<div>Fething users</div>`
}
return /*html*/`<div>
${users.map(user => new User({user,key:user.id,usersComponent:this}).call()).join('')}
</div>`
}
}
const usersComponent = new Users()
usersComponent.update()
</script>
</html>
FAQs
lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.
The npm package als-component receives a total of 14 weekly downloads. As such, als-component popularity was classified as not popular.
We found that als-component demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.